<script setup>
import { ref, defineProps, defineEmits, watch, getCurrentInstance, watchEffect } from 'vue'
import { formatTime } from '../../utils/time'
import request from '../../api/index'
const proxy = getCurrentInstance()?.proxy
const props = defineProps(['categoryList', 'type'])
const emits = defineEmits(['selectCategory', 'updateDate'])
const inputValue = ref('')
const selectIndex = ref(-1)
const visible = ref(false)
const url = ref({
  add: '/admin/category/addCategory',
  update: '/admin/category/updateCategoryName',
  delete: '/admin/category/deleteCategory'
})

const dataList = ref([{
  category_name: 'aaaa',
  num: 10,
  create_time: '2022-01-01 00:00:00',
}])

const addCategory = () => {
  if (inputValue.value.length === 0) {
    proxy.$message({ type: 'error', duration: 1000,  message: '分类名不能为空' })
    return
  }
  request.post(url.value.add, {
    groupType: props.type,
    categoryName: inputValue.value,
  }).then(res => {
    if (res.data.status ==='success') {
      proxy.$message({ type:'success', duration: 1000,  message: res.data.message })
      emits('updateDate')
    } else {
      if (res.data.errCode >= 500 ) {
        proxy.$message({ type: 'error', duration: 1000,  message: res.data.message })
      } else {
        proxy.$message({ type: 'warning', duration: 1000,  message: res.data.message })
      }
    }
  })
}
const updateDate = id => {
  emits('updateDate', id)
}
const changeCategory = (index, ID) => {
  selectIndex.value = index
  emits('selectCategory', ID)
}

const updateCategoryName = (id, name) => {
  request.put(url.value.update, {
    newCategoryName: name,
    categoryId: id
  }).then(res => {
    if (res.data.status ==='success') {
      proxy.$message({ type:'success', duration: 1000,  message: res.data.message })
      updateDate()
    } else {
      if (res.data.errCode >= 500 ) {
        proxy.$message({ type: 'error', duration: 1000,  message: res.data.message })
      } else {
        proxy.$message({ type: 'warning', duration: 1000,  message: res.data.message })
      }
    }
  })
}

const deleteCategory = id => {
  request.delete(url.value.delete, {
    data: {
      categoryIds: [id]
    }
  }).then(res => {
    if (res.data.status ==='success') {
      proxy.$message({ type:'success', duration: 1000,  message: res.data.message })
      updateDate(id)
    } else {
      if (res.data.errCode >= 500 ) {
        proxy.$message({ type: 'error', duration: 1000,  message: res.data.message })
      } else {
        proxy.$message({ type: 'warning', duration: 1000,  message: res.data.message })
      }
    }
  })
}
watch(inputValue, (count, prevCount) => {
  if (count.length > 10) {
    inputValue.value = prevCount
  }
})

defineExpose({
  changeCategory
})
</script>

<template>
  <div class="category">
    <yk-space align="start" >
      <yk-space wrap style="width:100%" :size="16" v-if="props.categoryList.length > 0">
        <a class="category-item" :class="{'category-active': selectIndex === -1}" @click="changeCategory(-1)">全部分类</a>
        <a class="category-item" :class="{'category-active': selectIndex === -2}" @click="changeCategory(-2, 1)">未分类</a>
        <a class="category-item" v-for="(item, index) in props.categoryList" :key="index" @click="changeCategory(index, item.ID)" :class="{'category-active': index === selectIndex}">{{ item.category_name }}</a>
      </yk-space>
      <yk-empty v-else style="width:100%;height:10px;transform:scale(0.6)">
        <template #description>
          还没有分类
        </template>
      </yk-empty>
      <yk-space class="category-action">
        <yk-popconfirm
          trigger="click"
          title="请输入分类名称"
          @cancel="cancel"
          @confirm="addCategory"
          placement="bottomRight"
        >
          <template #content>
            <div class="addCategory">
              <input type="text" class="category-input" placeholder="请输入..." v-model="inputValue" />
              <span class="category-textNum">{{ inputValue.length }} / 10</span>
            </div>
          </template>
          <a @click="inputValue = ''"><IconPlusCircleOutline/>新建</a>
        </yk-popconfirm>
        <a @click="visible = true" ><IconSettingsOutline/>管理分类</a>
        <yk-modal v-model="visible" title="管理分类" :show-footer="false">
          <yk-scrollbar style="height:500px" v-if="props.categoryList.length > 0">
            <yk-table >
                <yk-table-column property="category_name" label="分类名"></yk-table-column>
                <yk-table-column property="num" label="关联数"></yk-table-column>
                <yk-table-column property="create_time" label="创建时间"></yk-table-column>
                <yk-table-column
                  property="manage"
                  label="操作"
                  align="right"
                ></yk-table-column>
              <template #tbody>
                <tr v-for="(item, index) in categoryList" :key="item.ID" class="yk-table__row">
                  <td class="yk-table__cell">
                    <input type="text" class="category-input" placeholder="请输入..." v-model="item.category_name" @blur="updateCategoryName(item.ID,item.category_name)" @input="item.category_name = item.category_name.slice(0, 10)"/>
                    <span class="category-textNum-table">{{ item.category_name.length }} / 10</span>
                  </td>
                  <td class="yk-table__cell">
                    {{ item.totalNum }}
                  </td>
                  <td class="yk-table__cell">
                    {{ formatTime(item.create_time) }}
                  </td>
                  <td class="yk-table__cell text-right">
                    <yk-text type="primary" style="cursor: pointer" @click="deleteCategory(item.ID)">删除</yk-text>
                  </td>
                </tr>
              </template>
            </yk-table>
          </yk-scrollbar>
          <yk-empty v-else style="width:100%;">
            <template #description>
              还没有分类
            </template>
          </yk-empty>
        </yk-modal>
      </yk-space>
   </yk-space>
  </div>
</template>

<style scoped lang='less'>
.category {
  width: 100%;
  background-color: @bg-color-l;
  padding: 16px 24px;
  height: 100%;
  border-radius: 8px;
  
  .category-item {
    width: 100px;
    height: 30px;
    line-height: 30px;
    background-color: @bg-color-m;
    border-radius: 800px;
    text-align: center;

    &:hover {
      cursor: pointer;
      background-color: @bg-color-s;
    }

  }

  .category-active {
      color: @pcolor;
      background-color: @pcolor-1;
    }

  .category-action {
    width: 150px;
    a {
      color: @pcolor;
      height: 30px;
      line-height: 30px;

      &:hover {
        cursor: pointer;
      }
    }
    .addCategory {
      color: @gray-6;
      .category-textNum {
        position: absolute;
        top: 22px;
        right: 15px;
      }
    }
  }
}

.category-input {
  width:100%;
  margin: 16px 0;
  height: 35px;
  border: 1px solid @bg-color-s;
  background-color: @bg-color-s;
  border-radius: 8px;
  padding: 5px;

  &:hover {
    outline: 1px solid @pcolor;
  }

  &:focus {
    outline: 1px solid @pcolor;
  }
}

.category-textNum-table {
  position: absolute;
  top: 22px;
  right: 40px;
}

</style>